<template>
    <div class="list">
        <div 
          v-for="(item,index) in this.$store.state.todolist.taskList"
          :key="index"
          :class="item.done?'style1':'style2'"
        >
        <span>{{item.msg}}</span>
        <button @click="delTask(index)">删除</button>
        <button @click="togTask(index)">{{item.done?"已完成":"未完成"}}</button>
        </div>
    </div>
</template>

<script>
export default {
  methods: {
    delTask (index) {
      // 调用仓库删除数据的方法
      this.$store.commit("todolist/delTask",index)
    },
    togTask (index) {
      // 调用仓库切换数据状态的方法
      this.$store.commit("todolist/togTask",index)
    }
  },
}
</script>

<style>
  .list div{
    margin: 20px 0 ;
    background: #ccc;
  }
  .list span{
    margin-right: 200px;
  }
  button{
    margin: 0 10px;
  }
  .style1{
    color: aquamarine;
  }
  .style2{
    color: red;  
  }
</style>
